<template>
  <div ref="imageWrapper">
    <a-card title="查询条件" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="onSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="项目名称" prop="proName">
                <a-input @click.native="openOrganModel" readOnly v-model="queryParam.proName" placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <a-col :md="5" :sm="8">
              <a-form-model-item label="实际完工日期" prop="finishTime">
                <a-date-picker style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择结束时间"
                  v-model="queryParam.finishTime" />
              </a-form-model-item>
            </a-col>
            <a-col :md="5" :sm="8">
              <a-form-model-item label="交付日期" prop="deliveryTime">
                <a-date-picker style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择结束时间"
                  v-model="queryParam.deliveryTime" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="onSearch" icon="search" class="yellow_search_btn">查询</a-button>
                <a-button @click="searchReset" icon="reload" class="clear_btn">清除条件</a-button>
                <a-button type="danger" :loading="ydLoading" @click="handleToYD(false)" icon="arrow-right"
                  style="margin-left: 18px">转疑点</a-button>
                <a-button type="primary" icon="download" style="margin-left: 20px" @click="download">导出</a-button>
                <a-button v-if="isBackButton" type="primary" style="margin-left: 8px" @click="backUppage">
                  返回
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <div slot="title">
        <a-tooltip overlayClassName="bgc_tooltip" placement="topRight">
          <template slot="title">
            <span>{{ DataModel.mxms }}</span>
          </template>
          <span style="font-weight: bold">{{ DataModel.modelName || '久俊未结项目' }}</span>
        </a-tooltip>
        <a-icon type="strikethrough" @click.stop="showImg" />
      </div>
      <a-table :columns="columns" :dataSource="dataSource" size="middle" class="antableClass" rowKey="rowIndex"
        :pagination="ipagination" :loading="loading" :row-selection="rowSelection" @change="handleTableChange">
        <template slot="operation" slot-scope="text, record">
          <a @click="show(record)">查看</a>
        </template>
      </a-table>
    </a-card>
    <CheckOrganModal ref="departModal" @getdata="updateQueryParam"></CheckOrganModal>
    <CheckRecord ref="checkrecrod"></CheckRecord>
    <BusinessChart ref="businesschart" :flowimg="flowimg" />
    <YDModel ref="YDModel" :routerData="$route.path" />
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction, postAction, deleteAction } from '@/api/manage'
import columns from './columns'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from './YDModel'
import BusinessChart from './BusinessChart'
import CheckOrganModal from '../../common/CheckOrganModal'
import CheckRecord from './CheckRecord'
import html2canvas from 'html2canvas'
import jumpConfigMixin from '@/views/sj/sjxmzygl/sjxmss/jumpConfigMixin'
import { currentYMD } from '@/mixins/commontime.js'
export default {
  components: { CheckOrganModal, CheckRecord, BusinessChart, YDModel },
  mixins: [JeecgListMixin, base64toImg, jumpConfigMixin],
  data() {
    return {
      queryParam: {
        proId: '',
        proName: '',
        finishTime: currentYMD(),
        deliveryTime: currentYMD(),
        id: 'ab20719669f29b89e8d3b14020b75686',
        listData: '',
        modelId: 'ab20719669f29b89e8d3b14020b75686',
        extraFlag: true,
      },
      isBackButton: false,
      listData: [],
      rules: {
        // proName: { required: true, message: '请选择项目名称', trigger: 'change' },
        // finishTime: { required: true, message: '请选择实际完工日期', trigger: 'change' },
        // deliveryTime: { required: true, message: '请选择交付日期', trigger: 'change' },
      },
      url: {
        list: '/sjmx/queryJjwjxm',
        dataModel: '/dataModel/queryTitleAndSearch',
        model: '/dataModel/queryDataModelTemplateByExtra',
        // 查询模型转疑点信息(多选)
        TurnSuspects: '/sjmx/queryModelMsgMulti',
        // 导出久俊未结
        export: '/sjmx/exportJjwjxm',
      },
      columns: columns(),
      loading: false,
      dataSource: [],
      disableMixinCreated: true,
      DataModel: {},
      flowimg: '',
      selectedRows: [],
      selectedRowKeys: [],
    }
  },
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.selectedRowKeys = to.query.selectedRowKeys.split(' ') || []
          to.query.selectedRowKeys && delete to.query.selectedRowKeys
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.queryParam.arrayTime = to.query.arrayTime.split(',')
          this.$nextTick(() => {
            // 这可能存在问题
            this.onSearch()
          })
        } else if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          debugger
          let { projName, proId} = to.params
          this.queryParam.proId = proId
          this.queryParam.proName = projName
          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          this.queryParam.finishTime = startDate
          this.queryParam.deliveryTime = endDate

          this.isBackButton = true
          this.returnRecord = to.params.returnRecord

          this.$nextTick(() => {
            // 这可能存在问题
            this.onSearch()
          })
        }
      },
      immediate: true,
    },
  },
  computed: {
    // 行选择
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = [...selectedRowKeys]
          this.selectedRows = [...selectedRows]
        },
      }
    },
  },
  methods: {
    searchReset() {
      this.queryParam = {
        proId: '',
        proName: '',
        id: 'ab20719669f29b89e8d3b14020b75686',
        listData: '',
        modelId: 'ab20719669f29b89e8d3b14020b75686',
        extraFlag: true,
      }
      this.dataSource = []
    },
    show(record) {
      this.$refs.checkrecrod.check(record)
    },
    onSearch() {
      this.$refs.ruleForm.validate((value) => {
        if (value) {
          this.loadData(1)
          this.getTitleAndSearch()
        }
      })
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    addItem2() {
      return [
        // {
        //   fieldCnName: '会计期间',
        //   queryKey: 'docDate',
        //   queryType: 'queryDate',
        //   queryValueEnd: this.queryParam.date ? this.queryParam.date[0] : '',
        //   queryValueStart: this.queryParam.date ? this.queryParam.date[1] : ''
        // },
        {
          fieldCnName: '项目id',
          queryKey: 'proId',
          queryType: 'queryLike',
          queryValueEnd: '',
          queryValueStart: this.queryParam.extraId,
        },
      ]
    },
    updateQueryParam(data) {
      console.log(data, 'data')
      this.queryParam.proId = data.proId
      this.queryParam.proName = data.proName
    },
    getTitleAndSearch() {
      getAction(this.url.model, this.queryParam).then((res) => {
        if (res.success) {
          if (res.success) {
            this.DataModel = res.result[0]
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        }
      })
    },
    // GeneratelistTitle(data) {
    //   if (data.length !== 0) {
    //     let columns = [...this.columns]
    //     data.map((item) => {
    //       columns.splice(columns.length - 1, 0, {
    //         title: item.fieldCnName,
    //         align: 'center',
    //         dataIndex: item.fieldEnName,
    //         width: item.fieldLength,
    //       })
    //     })
    //     return columns
    //   }
    //   return []
    // },
    showImg() {
      if (Object.keys(this.DataModel).length != 0) {
        this.flowimg = `${window._CONFIG['domianURL']}/sys/common/static/${this.DataModel.mxUrl}`
        this.$refs.businesschart.show()
      } else this.$message.warning('请先配置查询条件')
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        let param = Object.assign({}, this.queryParam, {
          selectedRowKeys: this.selectedRowKeys.join(' '),
        })
        let ydnr = undefined
        let time = `【${startTime}～${endTime}】【久竣未结项目基本指标】`
        let ydList = JSON.stringify(this.selectedRows)
        postAction(this.url.TurnSuspects, Object.assign({}, this.queryParam, { ydList: ydList })).then((res) => {
          if (res.success) {
            ydnr = res.result[0].ydms ? res.result[0].ydms : ydnr
            this.addYd(param, ydnr, time, res.result[0].gzzd)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    addYd(record, ydnr, time, gzzd) {
      this.ydLoading = true
      html2canvas(this.$refs.imageWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL('image/png')
        console.log('父组件调用完了')
        this.$refs.YDModel.show(record, dataURL, ydnr, time, gzzd)
        this.ydLoading = false
      })
    },
    // 导出数据
    download() {
      if (this.dataSource.length != 0) {
        getAction(this.url.export, this.queryParam).then((res) => {
          if (res.success) {
            this.handleDownloadFile(res.result)
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
        })
      } else {
        this.$message.warning('请先查询')
      }
    },
    handleDownloadFile(fileUrl) {
      this.$message.success('正在下载，请稍等！')
      let url = `${window._CONFIG['domianURL']}/sys/common/download/${fileUrl}`
      window.open(url, '_blank')
    },
  },
}
</script>

<style lang="less">
.bgc_tooltip {
  .ant-tooltip-inner {
    // 这里是框框
    border-radius: 20px;
    color: #333;
    width: 400px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.85) !important;
  }

  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';
</style>